<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>稿件上传</title>
	<link
		rel="stylesheet"
		href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
		integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP"
		crossorigin="anonymous"
	/>
	<script src="//cdnjs.loli.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
	<script src="//cdnjs.loli.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="mdui-theme-accent-blue mdui-appbar-with-toolbar mdui-appbar-with-tab-larger">
	<div class="mdui-container" id="upload_app">
		<div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
			<div class="mdui-toolbar mdui-color-indigo">
				<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '主页'}" onclick="location='/index.html'"><i class="mdui-icon material-icons">home</i></button>
				<a href="javascript:;" class="mdui-typo-headline">稿件上传</a>
				<div class="mdui-toolbar-spacer"></div>
				<span class="mdui-typo-title">欢迎你，{{ username }}！</span>
				<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent" v-on:click="logout" v-show="is_login()">注销</button>
			</div>
			<div class="mdui-tab mdui-color-indigo mdui-tab-full-width" mdui-tab>
				<a href="#article" class="mdui-ripple">
					<i class="mdui-icon material-icons">description</i>
					<label>文章</label>
				</a>
				<a href="#picture" class="mdui-ripple mdui-tab-active">
					<i class="mdui-icon material-icons">image</i>
					<label>图片</label>
				</a>
				<a href="#video" class="mdui-ripple">
					<i class="mdui-icon material-icons">videocam</i>
					<label>视频</label>
				</a>
			</div>
		</div>
		<div class="mdui-center" style="max-width: 1280px;">
			<div id="article">
				<div class="mdui-textfield mdui-textfield-floating-label">
				  <label class="mdui-textfield-label">标题</label>
				  <input class="mdui-textfield-input" type="text" v-model="article_title"/>
				</div>
				<div class="mdui-textfield">
				  <label class="mdui-textfield-label">正文</label>
				  <textarea class="mdui-textfield-input" style="min-height: 480px;" v-model="article_text"></textarea>
				</div>
				<br/>
				<div class="mdui-container">
					<div class="mdui-col-xs-6">
						<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-center">预览</button>
					</div>
					<div class="mdui-col-xs-6">
						<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-center">提交</button>
					</div>
				</div>
			</div>
			<div id="picture">
				<br/>
				<img class="mdui-center" style="max-width: 1280px;" v-bind:src="imageURL"/>
				<br/>
				<input class="mdui-center" type="file" accept="image/*" v-on:change="pic_file_change" ref="pic_inputer"/>
				<br/>
				<div class="mdui-progress">
					<div class="mdui-progress-determinate" v-bind:style="{ width: pic_loading + '%' }"></div>
				</div>
				<br/>
				<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-center" v-on:click="upload_img">提交</button>
			</div>
			<div id="video">
				<div class="mdui-typo">
					<h1 style="text-align: center;">请联系 Nico 投稿你的视频稿件~</h1>
					<div style="text-align: center;">
						<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2232068231&site=qq&menu=yes">
							<img border="0" src="http://wpa.qq.com/pa?p=2:2232068231:53" alt="请联系 Nico 投稿你的视频稿件~" title="请联系 Nico 投稿你的视频稿件~"/>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script
		src="//cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
		integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+"
		crossorigin="anonymous"
	></script>
	<script src="/upload.js"></script>
</body>
</html>